<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{padding:0;margin:0;}
#container{
	width:800px;
	height:600px;
	background:url(images/background.jpg);
	margin:auto;
	margin-top:40px;
	position:relative;
	overflow:hidden;
}
.container{
	background:url(images/gkbg.jpg) !important;
}
#gameBtn{
	color:white;
	font-size:20px;
	cursor:pointer;
	border:1px solid #ffffff;
	width:100px;
	height:30px;
	line-height:30px;
	text-align:center;
	position:absolute;
	top:350px;
	left:40px;
	}
#Introduction{
	width:200px;
	position:absolute;
	top:430px;
	left:40px;
	color:#87E1D2;
}
#Introduction p{
	color:#BDBDBD;
}
#Bubble1{
	width:40px;
	height:40px;
	position:absolute;
	background:url(images/blue1.png);
}
#Bubble3{
	width:40px;
	height:40px;
	position:absolute;
	background:url(images/green3.png);
}
#Bubble5{
	width:40px;
	height:40px;
	position:absolute;
	background:url(images/orange5.png);
}
#Bubble7{
	width:40px;
	height:40px;
	position:absolute;
	background:url(images/pink7.png);
}
#score{
	color:#ffffff;
	font-size:20px;
	float:left;
	}
#countdown{
	color:#ffffff;
	font-size:20px;
	position:absolute;
	top:0;
	float:left;
}
#board{
	width:40px;
	height:10px;
	position:absolute;
	background:url(images/board.jpg) no-repeat center;
	bottom:0px;
}
#gameOverBox{
	width:300px;
	height:100px;
	position:absolute;
	background:#FFFFFF;
	left:250px;
	top:250px;
	text-align:center;
}
#record{
	color:white;
	font-size:20px;
	cursor:pointer;
	border:1px solid #ffffff;
	width:100px;
	height:30px;
	line-height:30px;
	text-align:center;
	position:absolute;
	top:390px !important;
	left:40px;
}

#recordBox{
	width:300px;
	height:600px;
	position:absolute;
	background:#E1CFD0;
	left:250px;
	text-align:center;
	display:none;
}
#closeBox{
	position:absolute;
	bottom:0px;
	width:300px;
	cursor:pointer;
}
#closeBox:hover{
	background:red;
}
</style>
<body>
	<div id="container">
		<div id="gameBtn">开始游戏</div>
        <div id="record">挑战记录</div>
        <!--内容简介Star--->
        <div id="Introduction">
            <h4>内容简介:</h4>
            <p>1.蓝色气球+1分，绿色气球+3分，橙色气球+5分，粉紫色气球+7分。</p>
            <p>2.按键盘的方向键移动木板去接球。</p>
            <p>3.限时1分钟,每关的气球生成速度将增加直到死亡为止。统计最高得分。</p>
        </div>
        <!--内容简介End-->
        <div id="gameOverBox" style="display:none;">
        	<h2>游戏结束!</h2>
        	<div>挑战者:<input type="text" value="" placeholder="请输入挑战者名字!"/><b style="color:red;">*</b></div>
            <p>你获得的积分是:<span></span></p>
            <button id="gameTrue" type="button">确定</button>
            <button id="again" type="button">再一次挑战</button>
            <button id="gamefalse" type="button">放弃</button>
        </div>
        <div id="recordBox">
        	<h1>挑战者</h1>
            <div id="closeBox"><a>关闭榜单</a></div>
            <p>姓名:分数</p>
        </div>
	</div>
</body>
<script>
	window.onload=function(){
		var obtn=document.getElementById("gameBtn");
		obtn.onclick=function(){
			this.style.display="none";
			document.getElementById("Introduction").style.display="none";
			/*document.getElementById("container").className="container";*/
			document.getElementById("record").style.display="none";
			document.getElementById("recordBox").style.display="none";
			game.gameStar("container");
		}
		
		
		document.getElementById("record").onclick=function(){
			/*动态的创建一个窗口实现忧伤往下,有点卷轴掉下来的感觉.然后在边展示挑战者和得分*/
			var recordBox=document.getElementById("recordBox");
			recordBox.style.display="block"
			recordBox.style.height=0;
			var changY=0;
			console.log(list);
			var createP =null;
			for(var i=1;i<list.length;i++){
				createP=document.createElement("p");
				createP.innerHTML=list[i]["name"]+":"+list[i]["value"];
				recordBox.appendChild(createP);
				createP=null;
			}
			
			var timer=setInterval(function(){
				changY=changY+3;
				if(recordBox.offsetHeight>=600){
					recordBox.style.height=600+"px";
					/*clearInterval(timer);
					timer=null;*/
					changY*=-1;
					changY*=0.6;
					if(changY>-6.75&&changY<0){
						clearInterval(timer);
						timer=null;
						changY=0;
					}
				}
				recordBox.style.height=recordBox.offsetHeight+changY+"px";
			},30);
		}
		

		
		document.getElementById("closeBox").onclick=function(){
			var recordBox=document.getElementById("recordBox");
			var timer=setInterval(function(){
				recordBox.style.height=recordBox.offsetHeight-10+"px";
				if(recordBox.offsetHeight==0){
					recordBox.style.display="none";
					clearInterval(timer);
					timer=null;
				}
			},30);
		}
		/*创建json数组*/
		var jsonstr="[{'name':'a','value':1}]";
		var list=eval('('+jsonstr+')');
		/*???*/
		var gameOverBox=document.getElementById("gameOverBox");
		document.getElementById("gameTrue").onclick=function(){
			var name=gameOverBox.getElementsByTagName("input")[0].value;
			var score=gameOverBox.getElementsByTagName("span")[0].innerHTML;
			if(name!=""&&name!=null)
			{
				var arr  =
				{
				   "name" : name,
				   "value" : score
				}
				list.push(arr);
				openAndClose();
			}
			
		}
		
		document.getElementById("gamefalse").onclick=function(){
			openAndClose();
		}
		
		document.getElementById("again").onclick=function(){
			game.gameStar("container");
			gameOverBox.style.display="none";
		}
		function openAndClose(){
			/*开启和关闭基本块*/
			document.getElementById("gameBtn").style.display="block";
			document.getElementById("Introduction").style.display="block";
			document.getElementById("record").style.display="block";
			gameOverBox.style.display="none";
		}
		
	}
	var game={
			gameStar:function(id){
					this.oParent=document.getElementById(id);
					this.createScore();/*积分*/
					this.createCountdown();/*倒计时*/
					this.createBubble();/*气泡*/
					this.createboard();/*接气球的板子*/
				},
			createCountdown:function(){
				var cd=document.createElement("div");
					cd.id="countdown";
					cd.innerHTML="倒计时:<span>60</span>";
					this.cd=cd;
					this.oParent.appendChild(cd);
					this.Countdown=cd.getElementsByTagName("span")[0];
					cd.style.left=this.oParent.offsetWidth/2-50+"px";
			},
			createScore:function(){
					var os=document.createElement("div");
					os.id="score";
					os.innerHTML="积分:<span>0</span>";
					this.os=os;
					this.oParent.appendChild(os);
					this.osNumber=os.getElementsByTagName("span")[0];
			},
			createBubble:function(){
					/*创建泡泡1秒钟生成一个*/
					var This =this;
					var timer=setInterval(function(){
							/*生成泡泡的时候获取一个0~1之间的随机值*800获取生成泡泡所在的位子*/
							var weizi=Math.floor(Math.random()*This.oParent.offsetWidth);
							if(weizi>This.oParent.offsetWidth-40){
								weizi=This.oParent.offsetWidth-40;
							}
							var cbb=document.createElement("div");
							/*随机取得气球的颜色cbb.id="Bubble";*/
							var bubbleColor=Math.floor(Math.random()*10);
							switch (bubbleColor){
								case 0:
								case 1:
								case 2:
								case 9:
								case 10:
									cbb.id="Bubble1";
									break;
								case 3:
								case 4:
									cbb.id="Bubble3";
									break;
								case 5:
								case 6:
									cbb.id="Bubble5";
									break;
								case 7:
								case 8:
									cbb.id="Bubble7";
									break;
									
							}
							cbb.className="Bubble"
							cbb.style.left=weizi+"px";
							/*cbb.style.top=0+"px";*/
							This.moveBubble(cbb);
							This.oParent.appendChild(cbb);
							/*倒计时*/
							This.Countdown.innerHTML=parseInt(This.Countdown.innerHTML)-1;
							if(parseInt(This.Countdown.innerHTML)=="0"){
								clearInterval(timer);
								timer=null;
								var gameOverBox=document.getElementById("gameOverBox");
								gameOverBox.style.display="block";
								gameOverBox.getElementsByTagName("span")[0].innerHTML=This.osNumber.innerHTML;
								This.oParent.removeChild(This.os);
								This.oParent.removeChild(This.cd);
								This.oParent.removeChild(This.board);
								/*当游戏结束的时候要清除创建游戏的的那些div*/
								
							}
							/*end倒计时*/
						},1000);
				},
			moveBubble:function(cbb){
				var This=this;
				speed=3;/*写个数组放速度*/
				cbb.timer=setInterval(function(){
					cbb.style.top=cbb.offsetTop+speed+"px";
					/*console.log(cbb.offsetWidth);*/
					if(cbb.offsetTop>This.oParent.offsetHeight-40||parseInt(This.Countdown.innerHTML)=="0"){
						clearInterval(cbb.timer);
						cbb.timer=null;
						This.oParent.removeChild(cbb);
					}
					if(game.pz(cbb,This.board)&&parseInt(This.Countdown.innerHTML)!="0"){
						var bubbleMath=cbb.id=="Bubble1"?1:cbb.id=="Bubble3"?3:cbb.id=="Bubble5"?5:cbb.id=="Bubble7"?7:0;
						clearInterval(cbb.timer);
						cbb.timer=null;
						This.oParent.removeChild(cbb);
						This.osNumber.innerHTML=parseInt(This.osNumber.innerHTML)+bubbleMath;
					}
				},30);
			},
			createboard:function(){
				/*创建接气球的板子*/
				var This=this;
				var board=document.createElement("div");
				board.id="board";
				/*起始位子*/
				var timer=0;
				This.oParent.appendChild(board);
				This.board=document.getElementById("board");
				var direction=null;/*方向*/
				/*console.log(this.oParent.offsetWidth+","+this.board.offsetWidth);*/
				board.style.left=(this.oParent.offsetWidth-this.board.offsetWidth)/2+"px";
				document.onkeydown=function(e){
					var ev=e||window.event;
					if(e.keyCode==39){
						direction="right";/*x向右*/
					}else
					if(e.keyCode==37)
					{
						direction="left";/*x向左*/
					}
					if(!timer){
						timer=setInterval(show,30);
					}
				}
				
				document.onkeyup=function(e){
					var ev=e||window.event;
					if(e.keyCode==37||e.keyCode==39){
						clearInterval(timer);
						timer=null;
						direction=null;
					}
				}
				
				function show(){
					/*判断移动模板的位子*/
					if(parseInt(This.Countdown.innerHTML)=="0"){
						direction=null;
					}
					if(direction=="left"){
						if(This.board.offsetLeft>0){
							This.board.style.left=This.board.offsetLeft-10+"px";
						}
					}
					else
					if(direction=="right")
					{
						if(This.board.offsetLeft<(This.oParent.offsetWidth-This.board.offsetWidth)){
							This.board.style.left=This.board.offsetLeft+10+"px";
						}
					}
				}
			},
			pz:function(obj1,obj2){
				/*检查气球和木板有没有碰撞*/
				var L1=obj1.offsetLeft;/*物体左边距离父级左边的距离*/
				var R1=obj1.offsetLeft+obj1.offsetWidth;/*物体右边距离父级右边的距离*/
				var T1=obj1.offsetTop;/*物体的顶部距离父级顶部的距离*/
				var B1=obj1.offsetTop+obj1.offsetHeight;/*物体的底部距离父级顶部的距离*/
				
				var L2=obj2.offsetLeft;/*物体左边距离父级左边的距离*/
				var R2=obj2.offsetLeft+obj2.offsetWidth;/*物体右边距离父级右边的距离*/
				var T2=obj2.offsetTop;/*物体的顶部距离父级顶部的距离*/
				var B2=obj2.offsetTop+obj2.offsetHeight;/*物体的底部距离父级顶部的距离*/
				
				/*console.log(L2+","+R2+","+T2+","+B2);*/
				if(L1>R2||R1<L2||T1>B2||B1<T2){
					return false;
				}else{
					return true;
				}
			}
		};
	
</script>
</html>
